<template>
    <div>
        <el-dialog :title="$t('common.preview')" :visible.sync="Visible" width="400px" :close-on-click-modal="false"
      @close="cancel">
            <div style="display: flex; justify-content: center; padding: 10px">
                <div class="bg">
                    <div class="headerText">
                        发现精彩
                        <img class="left_btn" src="@/assets/img/left_btn.png" alt="" />
                    </div>
                    <div class="content">
                        <div class="title_group">
                            <div class="title">{{ data.title }}</div>
                            <div class="time">{{ data.publish_time }}</div>
                        </div>
                        <div ref="text" class="text"></div>
                    </div>
                </div>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        // 接收绑定参数
    },
    data() {
        return {
            Visible: false,
            aaa: '',
            data: {
                title: '',
                publish_time: '',
                content: ''
            }
        };
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
        init(data) {
            this.Visible = true;
            this.$nextTick(() => {
                this.data.title = data.title;
                this.setDay(data.publish_time)
                const result = this.findContentBetweenColonsAndPx(data.content);
                let str = data.content;
                // if (result.length > 0) {
                //     result.forEach((item) => {
                //         let regex = new RegExp(item.key, 'g'); // 创建正则表达式，'g'标志表示全局替换
                //         str = str.replace(regex, 'font-size: ' + ((item.num / 3) * 2).toFixed(2) + 'px;');
                //     });
                // }
                this.$refs.text.innerHTML = str;
            });
        },
        findContentBetweenColonsAndPx(input) {
            const regex = /font-size:\s*(\d+(\.\d+)?px);?/g;
            const fontSizes = [];
            let match;

            while ((match = regex.exec(input))) {
                fontSizes.push({ key: match[0], num: parseInt(match[1]) });
            }
            let some = [];
            fontSizes.forEach((el) => {
                if (!some.some((e) => e.num == el.num)) {
                    some.push(el);
                }
            });
            return some;
        },
        //格式化当前时间
    setDay(oldDate) {
      var date = new Date(oldDate);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      let hh = date.getHours();
      let mf =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.data.publish_time =
        year +
        '年' +
        month +
        '月' +
        strDate +
        "日 " +
        hh +
        ":" +
        mf
    },
        //取消
        cancel() {
            this.Visible = false;
        }
    }
};
</script>

<style scoped lang="less" >
.bg {
    width: 276px;
    height: 597px;
    background: url('../../assets/img/iphone_bg.png') no-repeat center center / 100% 100%;
    padding: 40px 15px;
    box-sizing: border-box;
    .headerText {
        position: relative;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #000;
        .left_btn {
            position: absolute;
            left: 10px;
            top: 8px;
            width: 7px;
        }
    }
    .title_group {
        margin: 10px 0;
        .title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
        }
        .time {
            margin-top: 10px;
            font-size: 12px;
            color: #b2b2b2;
        }
    }
    /deep/ .text {
        width: 100%;
        height: 100%;
        p {
            margin: revert;
            padding: revert;
        }
        ul,
        ol {
            margin: revert;
            padding: revert;
            // padding-left: 10px;
        }
    }
    .content {
        height: calc(100% - 10px);
        overflow-y: auto;
    }
    .content::-webkit-scrollbar {
        width: 0;
    }
}
</style>